<template>
  <div id="main">
			<div class="content clear">
				<div class="account-wrapper">
					<div class="account-sidebar">
						<div class="avatar gray-box clear">
							<div class="js-account-sidebar-info">
								<img :src="photo">
							</div>
							<div class="box-inner">
								<ul class="account-nav"> 
									<li>
                    <router-link to="/account/order">我的订单</router-link>
                  </li>
									<li>
                    <router-link to="/account/address">收货地址</router-link>
                  </li> 
									<li>
                    <router-link to="/account/setting">个人设置</router-link>
                  </li> 
								</ul>
							</div>
						</div>
					</div>
					<div class="account-content">
						<!-- 呈现个人中心的子组件 -->
            <router-view></router-view>
					</div>
				</div>
			</div>
		</div>
</template>

<script>
	import {BASE} from '../../config'
  export default {
		computed: {
			photo() {
				let url = 'http://static.smartisanos.cn/account/asset/img/default-user-avatar.png'
				let {avatar} = this.$store.state.user.userInfo
				return avatar?BASE+avatar:url
			}
		},
    // beforeRouteLeave(to, from, next) {
    //   // 导航离开该组件的对应路由时调用
    //   // 可以访问组件实例 `this`
    //   let conf = confirm('确定要离开我吗？')
    //   if(conf){
    //     next()
    //   }else{
    //     next('/account/order')
    //   }
    // }
  }
</script>
<style src="../../assets/css/account.css" scoped></style>
<style lang="less" scoped>
.router-link-exact-active.router-link-active{
  background: #9CAEE9;
  color: #fff !important;
}
</style>